<template>
    <view>
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <view class="kaoshi-head kaoshi-xcx">
            <!-- #ifndef MP-WEIXIN -->
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left"
                      @tap="$navigateBack">
                    <view class="iconfont icon-zuojiantou"></view>
                </view>
                <view class="kaoshi-head-m">{{type == '1' ? '章节练习' : '历年真题'}}</view>
            </view>
            <!--#endif-->
            <view class="kaoshi-head-banner" v-if="type == '1'">
                <view class="kaoshi-user-top-remind-b">
                    <view class="kaoshi-user-top-remind-b-view">
                        <view class="kaoshi-user-top-remind-b-title kaoshi-user-top-remind-b-title-content kaoshi-user-top-h1"
                              v-cloak>{{practice_record.scale || 0}}
                            <view class="kaoshi-remind-title">%</view>
                        </view>
                        <view>正确率</view>
                    </view>
                    <view class="kaoshi-user-top-remind-b-view">
                        <view class="kaoshi-user-top-remind-b-title kaoshi-user-top-remind-b-title-content">
                            {{practice_record.test_num || 0}}
                            <view class="kaoshi-user-top-remind-b-title-p">/{{practice_record.total}}题</view>
                        </view>
                        <view>已做题</view>
                    </view>
                    <view class="kaoshi-user-top-remind-b-view">
                        <view class="kaoshi-user-top-remind-b-title kaoshi-user-top-remind-b-title-content">
                            {{practice_record.right_num || 0}}
                            <view class="kaoshi-user-top-remind-b-title-p">题</view>
                        </view>
                        <view>答对</view>
                    </view>
                </view>
            </view>
            <view class="kaoshi-tiku">
                <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                               :down="downOption" :up="upOption">
                    <block v-for="(item, index) in list" :key="index">
                        <view class="kaoshi-tiku-content" @tap="goto_detail(item)">
                            <view style="flex: 1;">
                                <view class="kaoshi-tiku-content-flex">
                                    <view class="kaoshi-tiku-content-top">
                                        <view>{{item.name}}</view>
                                    </view>
                                    <view class="kaoshi-tiku-bilv" v-cloak>{{item.scale || 0}}
                                        <view class="kaoshi-remind-title">%</view>
                                    </view>
                                </view>
                                <view class="kaoshi-tiku-content-flex">
                                    <view class="kaoshi-tiku-content-bottom">
                                        <view class="iconfont icon-dui2"></view>
                                        <view class="pub-gray">已答题{{item.test_num}}/{{item.total_num}}</view>
                                    </view>
                                    <view class="pub-gray">正确率</view>
                                </view>
                            </view>
                            <view class="iconfont icon-arrow"></view>
                        </view>
                    </block>
                </mescroll-body>
            </view>
        </view>
    </view>
</template>
<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import {mapState} from 'vuex'
    import Error from '@/core/untils/error/index';

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        num: 0,
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                // 列表数据
                list: [],

                type: '',
                practice_record: {},
            }
        },
        onShow() {
            if (this.$myUserLogin.getToken()) {
                if (this.type == 1) {
                    //获取顶部正确率
                    this.get_record();
                }
            }
        },
        onLoad(opts) {
            if (opts && opts.from_type) {
                this.type = opts.from_type
            }
        },
        mounted() {

        },
        computed: {
            ...mapState(['subject', "userinfo"]),
        },
        components: {},
        methods: {
            /*上拉加载的回调*/
            async upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let needLogin = false
                if (this.userinfo.token) {
                    needLogin = true
                }

                let res = await this.$myHttp.post({
                    url: this.type == '1' ? this.$myHttp.urlMap.unitList : this.$myHttp.urlMap.zhentiList,
                    data: {
                        subject_id: this.subject.id,
                        unit_id: 0,
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin: needLogin
                })
                if (res.code == 1) {
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage = data.xxx;
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.total;

                    this.mescroll.endBySize(curPageLen, totalSize);
                    if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
                    this.list = this.list.concat(curPageData); //追加新数据
                } else {
                    this.mescroll.endErr()
                }
                // 此处仍可以继续写其他接口请求...
                // 调用其他方法...
            },
            async get_record() {
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.unitPracticeRecord,
                    data: {
                        subject_id: this.subject.id,
                    },
                    needLogin: true
                })
                if (res.code == 1) {
                    this.practice_record = res.data
                }
            },
            goto_detail(item) {
                if (item.total_num == 0) { //如果目录下没有题目，提示用户
                    this.$myUtils.$prompt.showToast({
                        icon: 'none',
                        title: '当前目录下没有题目，请联系老师'
                    });
                    return
                }
                if (this.type == '1') {
                    if (item.is_last == 0) {
                        //非终极栏目，点击进入下级栏目
                        this.$openrul('/pages/questionBank/detail/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
                    } else if (item.is_last == 1) {
                        if (this.$myUserLogin.getToken()) {
                            //终极栏目，点击进入答题页
                            this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
                        } else {
                            Error.errorNotLoggedIn();
                        }
                        //终极栏目，点击进入答题页
                        this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
                    }
                } else if (this.type == '2') {
                    if (this.$myUserLogin.getToken()) {
                        //点击进入答题页
                        this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
                    } else {
                        Error.errorNotLoggedIn();
                    }
                }
            }
        }
    }
</script>
<style>
    page {
        background: #f6f7f9;
    }

    .kaoshi-head {
        background: #3c7bfc;
        height: 116px;
    }

    .kaoshi-head-top {
        color: #fff;
    }

    .kaoshi-head-top .kaoshi-head-m {
        font-weight: normal;
    }

    .kaoshi-head-banner {
        background: #fff;
        border-radius: 5px;
        width: 92%;
        margin: 10px auto;
        box-shadow: 0 0 10px rgba(208, 208, 208, 0.5);
        margin-bottom: 18px;
        padding: 16px 0 18px 0;
    }

    .kaoshi-user-top-remind-b {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        color: #c5c5c5;
    }

    .kaoshi-user-top-remind-b-view {
        flex: 1;
    }

    .kaoshi-user-top-remind-b-title {
        font-size: 18px;
        color: #000;
        padding: 4px 0 6px 0;
    }

    .kaoshi-remind-title {
        font-size: 13px;
        color: #000;
    }

    .kaoshi-user-top-remind-b-title-content {
        display: flex;
        align-items: baseline;
        justify-content: center;
    }

    .kaoshi-user-top-remind-b img {
        width: 48px;
        height: 26px;
    }

    .kaoshi-user-top-h1 {
        font-size: 26px !important;
        padding: 0 !important;
    }

    /*题库列表*/
    .kaoshi-tiku {
        background: #fff;
    }

    .kaoshi-tiku-content {
        width: 92%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
        padding: 14px 0;
        border-bottom: solid 1px #f5f5f5;
    }

    .kaoshi-tiku-content-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .kaoshi-tiku-content .icon-arrow {
        padding-left: 13px;
        color: #b3b3b3;
    }

    .kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
        padding-bottom: 2px;
    }

    .kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
        font-size: 14px;
    }

    .kaoshi-tiku-content-top {
        display: flex;
        align-items: center;
    }

    .kaoshi-tiku-content-top img {
        width: 20px;
        height: 22px;
        margin-right: 10px;
    }

    .kaoshi-tiku-content-bottom {
        display: flex;
        align-items: center;
    }

    .kaoshi-tiku-content-flex .icon-dui2 {
        margin: 2px 2px 0 0;
        color: #3c7bfc;
    }

    .kaoshi-tiku-bilv {
        font-size: 22px;
        color: #000;
        display: flex;
        align-items: baseline;
    }
    .kaoshi-user-top-remind-b-title-p{
      font-size: 15px;
    }
    /* #ifdef MP-WEIXIN */
    .kaoshi-xcx {
        background: #fff;
        padding-top: 8px;
    }
    /* #endif */
</style>
